<template>
  <view class="container">
    <view class="data-list">
      <view v-for="(data, i) in dataList" :key="i">
        <view class="data-item">
          <view class="item-top">
            <view style="margin-bottom: 5px;" class="">商品名：阿司匹林肠溶片</view>
            <view class="">通用名：阿司匹林</view>
          </view>
          <view class="item-bottom">
            <view class="item-bottom-item">
              <view style="margin-bottom: 5px;">药品数量：20 盒</view>
              <view>患者数：60</view>
            </view>

            <view class="item-bottom-item">
              <view style="margin-bottom: 5px;">药品单价：6.20</view>
              <view>药品总价：124.00</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="statistics-botom">
      <view class="item">
        总销量：100 盒
      </view>
      <view class="bottom-item">
        <view class="item">
          总患者数：88 人
        </view>
        <view class="item">
          总医生数：26 人
        </view>
      </view>
      <view class="bottom-item">
        <view class="item">
          总处方量：66 单
        </view>
        <view class="item">
          总金额：1 066 元
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const dataList = ref([])
</script>


<style scoped lang="scss">
.data-list {
  margin-bottom: 90px;
}

button {
  padding: 0 5px !important;
  margin: 0px;
}

.data-item {
  // width: 100%; 有margin了就不要设置
  background-color: #FFFFFF;
  padding: 10px 10px;
  margin: 10px 0;
  // border-bottom: 1px solid #f0f0f0;

  .item-bottom {
    display: flex;
    justify-content: space-between;
  }

  .item-bottom-item {
    margin: 5px 0;
  }
}

.bottom-item {
  display: flex;
  justify-content: space-between;
}

.statistics-botom {
  width: 100%;
  position: fixed;
  bottom: 0px;
  padding: 0px 10px 10px 10px;
  background-color: #f4f4f4;
  display: flex;
  flex-direction: column;

  .item {
    margin-top: 5px;
  }
}
</style>
